<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片</td>
        <td><img src="head.jpg" alt="" width="50"></td>
    </tr>

    <tr>
        <td>名字</td>
        <td id="nameId">xxx</td>
    </tr>

    <tr>
        <td>年龄</td>
        <td id="ageId">xxx</td>
    </tr>

    <tr>
        <td>好友</td>
        <td><ul></ul></td>
    </tr>
</table>

<input type="button" value="请求数据" onclick="f()">

<script>
    function f() {
        //模拟从服务器请求的数据
        let person={name:"苍老师",age:50,url:"a.jpg",friend:["刘备","关羽","张飞"]}
        //把对象显示到页面中

        let img = document.querySelector("img");
        img.src=person.url;

        let nameId = document.querySelector("#nameId");
        nameId.innerText=person.name;

        let ageId=document.querySelector("#ageId");
        ageId.innerText=person.age;

        let ul=document.querySelector("ul");
        for (let name of person.friend) {
            let a = document.createElement("li");
            a.innerText=name;
            ul.append(a);
        }


    }

</script>
</body>
</html>